<template>
  <div class="employee-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-label">员工姓名：</div>
      <!--
        搜索功能：前端把当前用户输入的关键词传给后端 后端用这个关键词做过滤筛选 把符合条件的数据返给前端
         1. 双向绑定拿到关键词
         2. 使用最新的关键词字段数据重新获取列表

        搜索：1.精确搜索(name完全等于柴柴)  2.模糊匹配(只要name中包含即可不需要精确相等)
       -->
      <el-input v-model="params.name" clearable placeholder="请输入内容" class="search-main" @clear="clearSearch" />
      <el-button type="primary" @click="doSearch">查询</el-button>
    </div>
    <div class="create-container">
      <el-button type="primary" @click="addEmployee">添加员工</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="employeeList">
        <el-table-column type="index" label="序号" />
        <el-table-column label="员工姓名" width="180" prop="name" />
        <el-table-column label="登录账号" width="180" prop="userName" />
        <el-table-column label="联系方式" width="120" prop="phonenumber" />
        <el-table-column label="角色" width="120" prop="roleName" />
        <el-table-column label="状态">
          <!--
            只有俩种情况  三元
           -->
          <template #default="scope">
            <!-- {{ scope.row.status===0?'未启用':'启用' }} -->
            {{ formatStatus(scope.row.status) }}
          </template>
        </el-table-column>
        <el-table-column label="添加时间" prop="createTime" />
        <el-table-column label="操作" fixed="right" width="180">
          <template #default="scope">
            <!--
              编辑：
               1. 拿到当前编辑项的id 获取详情数据 回填表单（调用接口 / row）
               2. 调用更新接口 (以id作为判断条件 适配新增和编辑状态下不同的接口调用)
               3. 适配文案现实 (以id作为判断条件)
             -->
            <el-button size="mini" type="text" @click="editEmployee(scope.row.id)">编辑</el-button>
            <!--
              删除：
                1. 询问用户
                2. 确认之后 调用接口
                3. 拉取最新列表
             -->
            <el-button size="mini" type="text" @click="delEmployee(scope.row.id)">删除</el-button>
            <el-button size="mini" type="text">重置密码</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--
      分页逻辑：页数 = 总条数 / 每页的条数
      点击每一页切换table中的数据：@current-change="pageChange" 自动执行回调函数并且把你当前点击的页数传入
     -->
    <div class="page-container">
      <el-pagination
        layout="total, prev, pager, next"
        :total="total"
        :page-size="params.pageSize"
        @current-change="pageChange"
      />
    </div>
    <!-- 添加员工 -->
    <!--
      1. 控制弹框的打开和关闭（跳转到新的路由） 如果表单很多 跳到新的路由 表单少 当前组件中完成
      2. 准备表单（1.表单校验 2.统一校验 3. 表单项有的需要通过调用接口获取 4.上传）
      3. 收集表单数据 调用接口 (表单数据无法直接使用 数组时间 - 分开的时间 / 组件产出的是数组的格式 - 字符串拼接的格式)
      4. 后续操作 （1. 关闭弹框  2. 清除表单数据 清除校验痕迹 3. 提示用户  4. 更新列表）
     -->

    <!--
       把新增功能通过抽象一个子组件来实现
       原则和思想：
         1. 组件已拆分必定会有组件嵌套 通信成本的增加 （父子通信）
         2. 尽量减少父子之间的通信
       抽象思路：
         1. 尽量能在子组件中的事儿都放到子组件中去做 表单相关的所有的数据和方法操作
         2. 父组件只做打开弹框控制 以及列表的更新
      -->
    <Add
      ref="add"
      :add-visible="addVisible"
      @close-dialog="closeDialog"
      @update-list="getList"
    />
  </div>
</template>

<script>
import { getEmployeeListAPI, delEmployee } from '@/api/employee'
// 导入子组件 渲染出来
import Add from './Add.vue'
export default {
  name: 'Employee',
  components: {
    Add
  },
  data() {
    return {
      employeeList: [], // 员工列表
      // 所有的请求参数 这里的参数无论有多少个 都只是和后端要数据的条件而已
      // 初始值 如果字符串类型string 设置为'' 如果要求是number类型 且没有具体的初始值 设置为null
      params: {
        name: '',
        page: 1,
        pageSize: 4
      },
      total: 0,
      addVisible: false,
      roleList: [] // 角色列表
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    editEmployee(id) {
      // 使用id获取当前的详情数据
      // 在父组件中获取还是子组件中获取呢？ 选择在子组件中调用接口 原则: 数据form和修改数据的方法 应该在同一个组件里
      // 调用子组件实例身上的getRoleDetail把id传入
      this.$refs.add.getRoleDetail(id)
      this.addVisible = true
    },
    // 适配状态
    formatStatus(status) {
      const MAP = {
        0: '未启用',
        1: '启用'
      }
      return MAP[status]
    },
    // 删除
    delEmployee(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 调用接口
        await delEmployee(id)
        // 拉取列表
        this.getList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {

      })
    },
    addEmployee() {
      this.addVisible = true
    },
    closeDialog() {
      this.addVisible = false
    },
    // 获取table数据
    async getList() {
      const res = await getEmployeeListAPI(this.params)
      this.employeeList = res.data.rows
      this.total = res.data.total
    },
    // 切换分页
    pageChange(page) {
      // 1. 需要把page交给请求参数
      this.params.page = page
      // 2. 重新发送列表接口请求
      this.getList()
    },
    // 搜索
    doSearch() {
      this.getList()
    },
    clearSearch() {
      // 把当前的请求页数复原为1 然后再请求
      this.params.page = 1
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.employee-container {
  padding: 10px;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  ;
  padding-bottom: 20px;

  .search-label {
    width: 100px;
  }

  .search-main {
    width: 220px;
    margin-right: 10px;
  }
}
.create-container{
  margin: 10px 0px;
}
.page-container{
  padding:4px 0px;
  text-align: right;
}
.form-container{
  padding:0px 80px;
}
</style>
